<!-- 导航 -->
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
*{margin: 0px; padding: 0px;}
.navBar{margin: 100px;}
.navBar ul{width: 150px; border: 1px solid #ccc; list-style: none; margin-top: 20px;}
.navBar ul a{display: block; height: 35px; line-height: 35px; padding-left: 15px; border-bottom: 1px solid #ccc; text-decoration: none;}
.navBar ul li:last-child a{border-bottom:none;}
.navBar ul a:hover{color: #f00;}
</style>
</head>
<body>


<script src="js/jQuery.js"></script>
<script type="text/javascript" src="js/handlebars-v3.0.3.js"></script>
<script src="js/mock.js"></script>
<script type="text/javascript" src="js/data.js"></script>

<nav class="navBar">
	<h2>导航：</h2>
	<ul class="navlist" id="navlist"> </ul>
</nav>

<!-- 渲染模板 -->
<script id="nav-template" type="text/x-handlebars-template">
	{{#each this}}
		<li><a ref="356" href="{{navLink}}"><span class="nav">{{navName}}</span></a></li>
	{{/each}}
</script>

<script type="text/javascript">
var source   = $("#nav-template").html();//获取模板
var template = Handlebars.compile(source);//预编译模板

$.ajax({
    url: 'http://nav.cn',
    dataType:'json',
    success:function(data){
    	$("#navlist").html(template(data.data));
    }
    
})

</script>
</body>
</html>
